<template>
  <div>
    <h1>购物车</h1>
    <h3>手机 - ￥ - {{ phonemoney }} 数量 : {{ phonenumber }}
    <button @click="increment1">+</button>
    <button @click="decrement1">-</button>
    </h3>
    <h3>电脑 - ￥ - {{ computermoney }} 数量 : {{ computernumber }}
    <button @click="increment2">+</button>
    <button @click="decrement2">-</button>
    </h3>
    <h3>键盘 - ￥ - {{ keyboardmoney }} 数量 : {{ keyboardnumber }}
    <button @click="increment3">+</button>
    <button @click="decrement3">-</button>
    </h3>
    <h2>总价 : ￥{{ getmoney }}</h2>
  </div>
</template>

<script>
import { mapState, mapMutations, mapGetters } from "vuex";

export default {
  computed: {
    ...mapState(["phonemoney","phonenumber"]),
    ...mapState(["computermoney","computernumber"]),
    ...mapState(["keyboardmoney","keyboardnumber"]),
    ...mapGetters(["getmoney"]),
  },

  methods: {
    ...mapMutations(["increment1", "decrement1"]),
    ...mapMutations(["increment2", "decrement2"]),
    ...mapMutations(["increment3", "decrement3"]),
    ...mapMutations(["sum"],)
  },
};
</script>